<template>
    <div class="ReportCase">
        <van-nav-bar title="查询条件" left-arrow @click-left="onClickLeft" style="margin-bottom: 12px" />
        <van-form @submit="onSubmit">
            <van-field v-if="$route.query.type == 0" v-model="insureNum" label="保单号" placeholder="请输入保单号" />
            <van-field v-model="containerNumber" label="箱号号" placeholder="请输入箱号号" />
            <!-- <van-field v-if="$route.query.type != 0" v-model="tagInvoiceWaybill" label="运单号" placeholder="请输入运单号" /> -->
            <van-cell-group>
                <van-field v-model="currentDate" is-link label="时间范围" placeholder="选择时间" @click="showCalendar = true" />
                <van-calendar v-model="showCalendar" type="range" @confirm="onConfirm" @close="showCalendar = false" />
            </van-cell-group>
            <div style="margin: 16px 0">
                <van-button block type="info" native-type="submit">查询</van-button>
            </div>
            <div style="margin: 16px 0">
                <van-button @click="reset" block native-type="button">重置</van-button>
            </div>
        </van-form>
        <div class="van-hairline--bottom"></div>
    </div>
</template>

<script>
import moment from "moment";
export default {
    name: "home",
    data() {
        return {
            insureNum: '',
            containerNumber: '',
            // tagInvoiceWaybill: '',
            currentDate: '',
            showCalendar: false,
            beginTime: '',
            endTime: '',
        };
    },
    methods: {
        onClickLeft() {
            this.reset()
        },
        onConfirm(date) {
            this.beginTime = moment(date[0]).format('YYYY-MM-DD')
            this.endTime = moment(date[1]).format('YYYY-MM-DD')
            this.currentDate = `${this.beginTime} 至 ${this.endTime}`;
            this.showCalendar = false;
        },
        onSubmit() {
            this.$router.push({
                path: '/guaranteeSlip',
                query: {
                    type: this.$route.query.type,
                    beginTime: this.beginTime,
                    endTime: this.endTime,
                    insureNum: this.insureNum,
                    containerNumber: this.containerNumber,
                    // tagInvoiceWaybill: this.tagInvoiceWaybill
                }
            });
        },
        reset() {
            this.$router.push({
                path: '/guaranteeSlip',
                query: {
                    type: this.$route.query.type,
                }
            });
        },
        setQueryContent() {
            const query = this.$route.query
            this.insureNum = query.insureNum || ''
            this.containerNumber = query.containerNumber || ''
            // this.tagInvoiceWaybill = query.tagInvoiceWaybill || ''
            this.beginTime = query.beginTime || ''
            this.endTime = query.endTime || ''
            this.currentDate = this.beginTime ? this.beginTime + '至' + this.endTime : ''
        }
    },
    mounted() {
        this.setQueryContent()
    },
};
</script>
<style scoped>
.ReportCase {
    background-color: #f5f5f5;
    height: 100%;
    width: 100%;
}
</style>
<style>
.van-dialog__message {
    text-align: left
}
</style>